import React from 'react'
import { Row, Col, Collapse } from 'antd'
const { Panel } = Collapse
const questionForm = (props) => {
    const { onChange } = props
    const InputProps = {
        title: '填空题',
        type: 'Input',
        label: '',
        require: true,
        desc: '',
        rule: ''
    }
    const radioProps = {
        title: '单选题',
        type: 'Radio',
        label: '',
        require: true,
        desc: '',
        rule: '',
        option: [
            { label: '选项1' },
            { label: '选项2' },
            { label: '选项3' }
        ]
    }
    const checkBoxProps = {
        title: '多选题',
        type: 'CheckBox',
        label: '',
        require: true,
        desc: '',
        rule: '',
        option: [
            {
                label: '选项1'
            },
            { label: '选项2' },
            { label: '选项3' }]
    }
    const uploadProps = {
        title: '图片题',
        type: 'Upload',
        label: '',
        require: true,
        desc: '',
        maxLength: 1
    }
    const usernameProps = {
        title: '填空题',
        type: 'Input',
        label: '请输入姓名',
        require: true,
        desc: '',
        rule: ''
    }
    const mobileProps = {
        title: '填空题',
        type: 'Input',
        label: '请输入手机号',
        require: true,
        desc: '',
        rule: 'mobile',
        onlyRead: true
    }
    const idCardProps = {
        title: '填空题',
        type: 'Input',
        label: '请输入身份证号',
        require: true,
        desc: '',
        rule: 'idCard',
        onlyRead: true
    }
    const sixProps = {
        title: '单选题',
        type: 'Radio',
        label: '请选择性别',
        require: true,
        desc: '',
        rule: '',
        option: [
            {
                label: '男'
            },
            { label: '女' },
        ]
    }
    const dropDownProps = {
        title: '下拉题',
        type: 'DropDown',
        checkType: 'radio',
        label: '',
        require: true,
        desc: '',
        option: [
            { label: '选项1' },
            { label: '选项2' },
            { label: '选项3' }
        ]
    }
    const DateProps = {
        title: '日期时间',
        type: 'Date',
        label: '',
        require: true,
        desc: '',
        rule: 'YYYY-MM-DD HH:mm'
    }
    const fileUploadProps = {
        title: '文件上传题',
        type: 'FileUpload',
        label: '',
        require: true,
        desc: '',
        maxLength: 1
    }
    const MultiSegmentSelectionProps = {
        title: '多段填空',
        type: 'MultiSegmentSelection',
        label: '',
        require: true,
        desc: '',
        value: '填空1______，填空2______'
    }
    const AddressQuestionProps = {
        title: '地址题',
        type: 'AddressQuestion',
        addressType: true,
        label: '',
        require: true,
        desc: '',
        rule: 'area'
    }
    const ParagraphDescription = {
        title: '段落说明',
        type: 'ParagraphDescription',
        label: '',
        rule: 'left'
    }
    const InformedProps = {
        title: '单选题',
        type: 'Radio',
        label: '知情确认',
        require: true,
        desc: '',
        rule: '',
        option: [
            {
                label: '本人确认已了解上述注意事项，并按照相关规定严格遵守'
            },
        ]
    }
    const ScaleProps = {
        title: '量表题',
        type: 'Scale',
        label: '请打分',
        require: true,
        orderValue: '非常满意',
        reverseValue: '非常不满意',
        rule: 'order',
        scaleType: "satisfaction",
        scaleNum: 5
    }

    const ScoringProps = {
        title: '打分题',
        type: 'Scoring',
        label: '请打分',
        require: true,

    }
    const voteRadioProps = {
        title: '投票单选题',
        type: 'VoteRadio',
        label: '',
        require: true,
        desc: '',
        rule: '',
        option: [
            { label: '投票1' },
            { label: '投票2' },

        ]
    }
    const voteCheckProps = {
        title: '投票多选题',
        type: 'VoteCheck',
        label: '',
        require: true,
        desc: '',
        rule: '',
        option: [
            { label: '投票1' },
            { label: '投票2' },
        ]
    }
    const PictureProps = {
        title: '图片显示',
        type: 'Pictrue',
        label: '图片标题',
    }

    const RenderList = [
        {
            title: '基础题型',
            key: '1',
            list: [
                {
                    type: 'Input', title: '填空题', click: () => {
                        onChange && onChange({ changeType: 'add', data: InputProps })
                    }
                },
                {
                    type: 'Radio', click: () => {
                        onChange && onChange({ changeType: 'add', data: radioProps })
                    }, title: '单选题'
                },
                {
                    type: 'CheckBox', title: '多选题', click: () => {
                        onChange && onChange({ changeType: 'add', data: checkBoxProps })
                    },
                },

                {
                    type: 'Upload', title: '图片题', click: () => {
                        onChange && onChange({ changeType: 'add', data: uploadProps })
                    },
                }
            ]
        },
        {
            title: '常用模板',
            key: '2',
            list: [
                {
                    type: 'Username', title: '姓名', click: () => {
                        onChange && onChange({ changeType: 'add', data: usernameProps })
                    }
                },
                {
                    type: 'Mobile', title: '手机号', click: () => {
                        onChange && onChange({ changeType: 'add', data: mobileProps })
                    }
                },

                {
                    type: 'IdCard', title: '身份证号', click: () => {
                        onChange && onChange({ changeType: 'add', data: idCardProps })
                    }
                },
                {
                    type: 'Six', title: '性别', click: () => {
                        onChange && onChange({ changeType: 'add', data: sixProps })
                    }
                }
            ]
        },
        {
            title: '常用题型',
            key: '3',
            list: [
                {
                    type: 'DropDown', title: '下拉题', click: () => {
                        onChange && onChange({ changeType: 'add', data: dropDownProps })
                    }
                },
                {
                    type: 'Date', title: '日期时间', click: () => {
                        onChange && onChange({ changeType: 'add', data: DateProps })
                    }
                },

                {
                    type: 'FileUpload', title: '文件上传', click: () => {
                        onChange && onChange({ changeType: 'add', data: fileUploadProps })
                    }
                },
                {
                    type: 'MultiSegmentSelection', title: '多段填空', click: () => {
                        onChange && onChange({ changeType: 'add', data: MultiSegmentSelectionProps })
                    }
                },
                {
                    type: 'AddressQuestion', title: '地址题', click: () => {
                        onChange && onChange({ changeType: 'add', data: AddressQuestionProps })
                    }
                },
                {
                    type: 'Radio', click: () => {
                        onChange && onChange({ changeType: 'add', data: InformedProps })
                    }, title: '知情确认'
                },
                {
                    type: 'Scale', click: () => {
                        onChange && onChange({ changeType: 'add', data: ScaleProps })
                    }, title: '量表题'
                },

                {
                    type: 'Scoring', click: () => {
                        onChange && onChange({ changeType: 'add', data: ScoringProps })
                    }, title: '打分题'
                },
                {
                    type: 'VoteRadio', click: () => {
                        onChange && onChange({ changeType: 'add', data: voteRadioProps })
                    }, title: '投票单选题'
                },
                {
                    type: 'VoteCheck', click: () => {
                        onChange && onChange({ changeType: 'add', data: voteCheckProps })
                    }, title: '投票多选题'
                },


            ]
        },
        {
            title: '描述',
            key: '4',
            list: [
                {
                    type: 'ParagraphDescription', title: '段落说明', click: () => {
                        onChange && onChange({ changeType: 'add', data: ParagraphDescription })
                    }
                },
                {
                    type: 'Picture', title: '图片显示', click: () => {
                        onChange && onChange({ changeType: 'add', data: PictureProps })
                    }
                },
                // { type: 'Paging', title: '分页' },
            ]
        },
    ]
    return <Collapse defaultActiveKey={RenderList.map(item => {
        return item.key
    })} ghost>
        {RenderList.map((item, index) => {
            const { title, list = [], key } = item
            return <Panel header={title} key={key}>
                <Row gutter={[12, 12]}>
                    {list.map((val, index) => {
                        const { title, click } = val
                        return <Col key={index} span={12}>
                            <div onClick={() => click && click()} style={{ cursor: 'pointer', width: '100%', height: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid #e6e6e6' }}>
                                {title}
                            </div>
                        </Col>
                    })}

                </Row>
            </Panel>
        })}
    </Collapse>
}
export default questionForm 